<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>一张图指挥</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./fonts/onephoto/iconfont.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/com_table.css">
    <link rel="stylesheet" href="./css/jk_video.css">

    <!--[if lt IE 9]>
      <script src="./lib/ie9/html5.min.js"></script>
      <script src="./lib/ie9/respond.min.js"></script>
    <![endif]-->
</head>

<body class="videobody">
    <!-- <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:;">监控管理</a>
            <a href="javascript:;">一张图指挥</a>
        </span>
       
    </div> -->
    <!-- 左边的视频    -->
    <div class="clearfix">
        <div class="leftVideo">
            <div class="videoW">
                <video controls autoplay="autoplay">
                    <source
                        src="http://www.citysafety.cn/templates/fem/video/%E8%BD%AF%E4%BB%B6%E5%B9%B3%E5%8F%B0_x264.mp4"
                        type="video/mp4">
                    你的浏览器不支持，请用谷歌浏览器
                </video>
            </div>
            <!-- <div class="videoW">
                <video  controls  poster="./images/onephoto/video_fm.jpg">
                    <source src="http://www.citysafety.cn/templates/fem/video/%E8%BD%AF%E4%BB%B6%E5%B9%B3%E5%8F%B0_x264.mp4" type="video/mp4">
                  
                    你的浏览器不支持，请用谷歌浏览器
                </video>
            </div> -->
            <div class="videoW">
                <video controls>
                    <source
                        src="http://www.citysafety.cn/templates/fem/video/%E8%BD%AF%E4%BB%B6%E5%B9%B3%E5%8F%B0_x264.mp4"
                        type="video/mp4">

                    你的浏览器不支持，请用谷歌浏览器
                </video>
            </div>
            <div class="videoW">
                <video controls>
                    <source
                        src="http://www.citysafety.cn/templates/fem/video/%E8%BD%AF%E4%BB%B6%E5%B9%B3%E5%8F%B0_x264.mp4"
                        type="video/mp4">

                    你的浏览器不支持，请用谷歌浏览器
                </video>
            </div>
            <div class="videoW">
                <video controls>
                    <source
                        src="http://www.citysafety.cn/templates/fem/video/%E8%BD%AF%E4%BB%B6%E5%B9%B3%E5%8F%B0_x264.mp4"
                        type="video/mp4">

                    你的浏览器不支持，请用谷歌浏览器
                </video>
            </div>
            <div class="videoW">
                <video controls>
                    <source
                        src="http://www.citysafety.cn/templates/fem/video/%E8%BD%AF%E4%BB%B6%E5%B9%B3%E5%8F%B0_x264.mp4"
                        type="video/mp4">

                    你的浏览器不支持，请用谷歌浏览器
                </video>
            </div>
        </div>
        <div class="rightvideo clearfix">
            <div class="fl leftcontent">
                <div class="bj">
                    <img src="./images/onephoto/z4_baojing.jpg" alt="">
                </div>
                <div class="bj bj_msgW">
                    <span class="bj_title">报警原因分布图</span>
                    <img src="./images/onephoto/z4_shul.png" alt="">
                </div>
                <div class="bj_bottom">
                    <img src="./images/onephoto/z4_yjlist.jpg" alt="">
                </div>

            </div>
            <div class="fr">
                <div class="mingc">
                    <img src="./images/onephoto/z4_jzneibu.jpg" usemap="#Map10">
                    <!-- <span class="close">返回</span> -->
                    <map name="Map10" id="Map10">
                        <area shape="rect" coords="321,164,450,229" href="javascript:;" id="qyBaoBiaobtn" />
                        <area shape="rect" coords="431,15,482,45" href="javascript:;" id="close" />
                    </map>
                </div>
                <div class="mingc_bottom">
                    <img src="./images/onephoto/z4_xflist.jpg" alt="" class="xflist">
                </div>



            </div>
        </div>
        
    </div>
    <!-- 企业报表 -->
    <div class="qyBaoBiao">
        <img src="./images/onephoto/one_head.png" usemap="#Map11" class="title" border="0">
        <map name="Map11" id="Map11">
        
   
            <area shape="rect" coords="38,9,116,47" href="#" id="table"/>
             <area shape="rect" coords="126,7,220,47" href="#" id="shuju"/>
            <area shape="rect" coords="904,12,987,41" href="#" id="qyclose"/>
          </map>
        <!-- 表格 -->
        <div class="qyTableW" id="qytableW">
            <div class="timeW">
                <input type="text" id="start" value="2019-02-03">
                <span>到</span>
                <input type="text" id="end" value="2019-02-06">
                <a href="javascript:;" class="layui-btn">搜索</a>
            </div>
            <table class="layui-hide" id="tableL" lay-filter="tableL">
            </table>
        </div>
        <!-- 报表 -->
        <img src="./images/onephoto/one_shuju.png" alt="" style="display: none;" id="shujuShow">
    </div>

    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/config.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js"></script>
    <script type="text/javascript" src="./js/munu.js"></script>
    <script type="text/javascript" src="plugins/tableToExcel/tableToExcel.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript">
        var url = './data/jk_video.json';
        var wData = {
          Command: "ReadPagingData",
          TableName: "DotBanks"
      };
        var headArr = [
            { field: 'id', title: '序号', sort: true },
            { field: 'riqi', title: '日期' },
            { field: 'zaixian', title: '在线数量' },
            { field: 'off', title: '离线数量' },
            { field: 'gz', title: '故障数量' },
            { field: 'baojin', title: '报警数量' }
            // {title: '操作',toolbar: '#barDemo'}
        ];
        layui.use(['tree', 'laydate','table'], function () {
            $ = layui.jquery;
            var tree = layui.tree;  //树形菜单
            var laydate = layui.laydate;

            var table = layui.table;
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });

            /*************表格***************/
        
        var tab = renderTable(table,url,'#tableL',wData,headArr,function(res){
            $('[data-field=Id]').hide();
        });
            //  选项卡
            var tabChangeFn = (function () {
                var spanIcon = $('.comIcon', '#chooseTab');
                var comLianWang = $('.comLianWang');
                spanIcon.each(function (i) {
                    $(this).click(function () {
                        spanIcon.removeClass('active');
                        comLianWang.hide();
                        comLianWang.eq(i).show();
                        $(this).addClass('active');
                    })
                })
            })();

            // 生成数据报表点击事件
            var dataFn = (function () {
                var divIcon = $('#scsjbb');
                divIcon.click(function () {
                    $(this).toggleClass('active');
                })
            })();

            //建筑类型选择
            // 消防物资选择
            $('#close').click(function () {
                x_admin_close();
            });

            //企业报表

            var qytableW = $('#qytableW');
            var shuju = $('#shuju')
            var shujuShow = $('#shujuShow');
            $('#table').click(function(){
                qytableW.show();
                shujuShow.hide();
            });
            shuju.click(function(){
                qytableW.hide();
                shujuShow.show();
            });

            $('#qyBaoBiaobtn').click(function(){
                $('.qyBaoBiao').show();
            })
            $('#qyclose').click(function(){
                $('.qyBaoBiao').hide();
            })

        });

    </script>
</body>

</html>